<template>
  <div style="height:100%;background: #081325">
    <dv-loading v-if="loading" style="color:#fff">Loading...</dv-loading>
    <div class="page-view" v-else>
      <div class="view-box">
        <div class="view-head">
          <Header :topTitle="topTitle"></Header>
        </div>
        <div class="view-main">
          <div class="view-body">
            <el-row class="view-body-top">
              <el-col class="el-col" :span="7"><div class="box"><TopLeft :number="number" :total="total"></TopLeft></div></el-col>
              <el-col class="el-col" :span="10"><div class="box"><TopMid @handelPop="handelPop"></TopMid></div></el-col>
              <el-col class="el-col" :span="7"><div class="box"><TopRight :data="TopRightData"></TopRight></div></el-col>
            </el-row>
            <el-row class="view-body-bottom">
              <el-col class="el-col" :span="7"><div class="box"><BottomLeft :data="BottomLeftData"></BottomLeft></div></el-col>
              <el-col class="el-col" :span="10"><div class="box"><BottomMid :dataProp="BottomMidData"></BottomMid></div></el-col>
              <el-col class="el-col" :span="7"><div class="box"><BottomRight :data="BottomRightData"></BottomRight></div></el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../components/Header.vue'
import TopLeft from '../components/TopLeft.vue'
import TopMid from '../components/TopMid.vue'
import TopRight from '../components/TopRight.vue'
import BottomLeft from '../components/BottomLeft.vue'
import BottomMid from '../components/BottomMid.vue'
import BottomRight from '../components/BottomRight.vue'
import { yibiaoData, bingTuData, lunbobiaoData, lunbozhuData, zhexianData } from '../../../api/modules/large.screen.api'
export default {
  name: 'large-screen',
  components: {
    Header,
    TopLeft,
    TopMid,
    TopRight,
    BottomLeft,
    BottomMid,
    BottomRight
  },
  data () {
    return {
      loading: true,
      topTitle: '考勤决策分析可视化系统',
      number: 0,
      total: 0,
      TopRightData: [],
      BottomLeftData: [],
      BottomMidData: {},
      BottomRightData: []
    }
  },
  async mounted () {
    this.loading = false
    this.cancelLoading()
  },
  created () {
    setTimeout(() => {
      this.number = yibiaoData.number
      this.total = yibiaoData.total
      this.TopRightData = bingTuData
      this.BottomLeftData = lunbobiaoData
      this.BottomMidData = zhexianData
      this.BottomRightData = lunbozhuData
    }, 500)
  },
  methods: {
    handelPop (value) {
      console.log(value)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
      }, 200)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-view {
  background: #081325  url('../../../assets/large-screen-icon/bg.png');
  background-size: cover;
  color: #fff;
  height: 100%;
  .view-box {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    .view-head {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 0.9375rem;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 99;
      margin-bottom: 0.125rem;
    }
    .view-main {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      .view-body {
        flex: 1;
        height: 100%;
        position: relative;
        margin: 0 0.25rem;
        .view-body-top {
          height: 60%;
        }
        .view-body-bottom {
          height: 40%;
        }
        .el-col {
          height: 100%;
        }
        .box {
          height: 100%;
        }
      }
    }
  }
}
</style>
<style >
.df-ac-jcsb{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
